<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部搜索区域 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline total-form"
      >
        <el-form-item label="关键字" class="keyword-btn">
          <el-input
            v-model="formInline.keyword"
            clearable
            @clear="getInterviewinformation()"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="clearData">清除</el-button>
          <el-button type="primary" @click="searchData">搜索</el-button>
        </el-form-item>
        <el-form-item class="newButton">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="Addpostdisplay = true"
            >新增技巧</el-button
          >
        </el-form-item>
      </el-form>
      <!-- /头部搜索区域 -->
      <!-- 提示文案 -->
      <el-alert show-icon type="info">
        <div slot="title">数据一共{{ this.counts }}条</div>
      </el-alert>
      <!-- 提示文案 -->
      <!-- 表格数据区域 -->
      <el-table :data="interviewList" class="table-data">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column width="350" prop="title" label="文章标题">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <i
              class="el-icon-film"
              v-if="scope.row.videoURL !== null"
              @click="videoUrl(scope.row)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state" type="text" disabled
              >已启用</el-button
            >
            <el-button v-else type="text" disabled>已禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="text" @click="PreviewInformation(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.state"
              @click="DisableButton(scope.row)"
              >禁用</el-button
            >
            <el-button type="text" v-else @click="EnableButton(scope.row)"
              >启用</el-button
            >
            <el-button
              type="text"
              @click="reviseEssay(scope.row)"
              v-if="scope.row.state"
              disabled
              >修改</el-button
            >
            <el-button type="text" @click="reviseEssay(scope.row)" v-else
              >修改</el-button
            >
            <el-button
              type="text"
              @click="deletedData(scope.row)"
              v-if="scope.row.state"
              disabled
              >删除</el-button
            >
            <el-button type="text" @click="deletedData(scope.row)" v-else
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格数据区域 -->
      <!-- 分页功能 -->
      <div class="block page-nav">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.formInline.page"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="this.formInline.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.counts"
        >
        </el-pagination>
      </div>
      <!-- /分页功能 -->
    </el-card>
    <!-- 播放视频的对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="100%"> </el-dialog>
    <!-- /播放视频的对话框 -->
    <el-dialog :visible.sync="playVideo" width="80%">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      >
      </video-player>
    </el-dialog>
    <!-- 预览信息对话框 -->
    <el-dialog title="预览文章" :visible.sync="dialogVisible" width="80%">
      <h1>{{ previewmodel.title }}</h1>
      <span>{{ previewmodel.createTime | parseTime }}</span
      >&nbsp;&nbsp; <span>{{ previewmodel.username }}</span> &nbsp;&nbsp;
      <span class="el-icon-view">{{ previewmodel.visits }}</span>
      <div v-html="previewmodel.articleBody"></div>
    </el-dialog>
    <!-- /预览信息对话框 -->
    <!-- 添加文章的对话框 -->
    <el-dialog title="新增文章" :visible.sync="Addpostdisplay" width="60%">
      <articles-add
        v-if="Addpostdisplay"
        v-on:canceladd="canceladdList()"
        v-on:addAticle="addAticleList()"
      >
      </articles-add>
    </el-dialog>
    <!-- 添加文章的对话框 -->
    <!-- 修改文章的对话框 -->
    <el-dialog title="修改文章" :visible.sync="modifyDataVisible" width="60%">
      <el-form
        :model="eaditList"
        ref="eaditFormref"
        :rules="eaditrRules"
        label-width="80px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="eaditList.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="eaditList.articleBody"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input
            placeholder="请输入视频地址"
            v-model="eaditList.videoURL"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="CancelModification">取 消</el-button>
          <el-button type="primary" @click="DetermineModification()"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- /修改文章的对话框 -->
  </div>
</template>
<script>
import { list, add, update, remove, changeState } from '@/api/hmmm/articles.js'
import previewModule from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  name: 'ArticleList',
  data() {
    return {
      //  头部搜索双向绑定
      formInline: {
        //  当前页数
        page: 1,
        //一页显示条数
        pagesize: 10,
        // 关键字
        keyword: '',
        // 状态
        state: null,
      },
      // 页面的总条数
      counts: 0,
      //  预览页面的数据
      previewmodel: {},
      interviewList: [],
      dialogVisible: false,
      //  控制添加文章的对话框
      Addpostdisplay: false,
      //  修改数据的对话框
      modifyDataVisible: false,
      //  修改数据的数据
      eaditList: {},
      eaditrRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          {
            min: 5,
            max: 10,
            message: '长度在 5 到 10 个字符',
            trigger: 'blur',
          },
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
        ],
      },
      // 控制视频标签显示隐藏
      playVideo: false,
      //  视频播放数据
      playerOptions: {
        autoplay: true,
        muted: true,
        loop: true,
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '14:6',
        fluid: true,
        sources: [
          {
            type: 'video/mp4',
            src: 'https://v-cdn.zjol.com.cn/276984.mp4',
          },
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true,
        },
      },
    }
  },
  created() {
    this.getInterviewinformation()
  },
  components: {
    ArticlesAdd,
    previewModule,
  },
  methods: {
    //加载页面获取数据
    async getInterviewinformation() {
      try {
        const { data } = await list(this.formInline)
        console.log(data)
        this.interviewList = data.items
        this.counts = data.counts
      } catch (err) {
        this.$message({
          message: '获取数据失败奥',
          type: 'warning',
        })
      }
    },
    //  点击清除数据
    clearData() {
      this.formInline.keyword = ''
      this.getInterviewinformation()
    },
    // 点击搜索数据
    searchData() {
      this.getInterviewinformation()
    },
    // 每页条数发生改变时触发
    handleSizeChange(pageval) {
      this.formInline.pagesize = pageval
      this.getInterviewinformation()
    },
    // 页码发生改变时触发
    handleCurrentChange(changeval) {
      this.formInline.page = changeval
      this.getInterviewinformation()
    },
    // 预览信息模块
    PreviewInformation(row) {
      this.dialogVisible = true
      this.previewmodel = row
    },
    // 子给父传值刷新页面和关闭对话框
    canceladdList(articleRef) {
      this.Addpostdisplay = false
    },
    // 子组件修改父组件中的数据，添加完成后关闭对话框
    addAticleList() {
      this.Addpostdisplay = false
      this.getInterviewinformation()
    },
    // 点击修改文章渲染列表
    async reviseEssay(row) {
      console.log(row)
      this.eaditList = row
      this.modifyDataVisible = true
    },
    // 点击确定修改文章
    DetermineModification() {
      this.$refs.eaditFormref.validate(async (valid) => {
        if (!valid) {
          return this.$message.error('请填写完整的表单内容')
        } else {
          await update({
            id: this.eaditList.id,
            title: this.eaditList.title,
            articleBody: this.eaditList.articleBody,
            videoURL: this.eaditList.videoURL,
          })
          this.$message.success('修改数据成功奥')
          this.modifyDataVisible = false
          this.getInterviewinformation()
        }
      })
    },
    //  点击取消按钮，取消修改文章
    CancelModification() {
      this.getInterviewinformation()
      this.modifyDataVisible = false
    },
    // 点击删除数据
    async deletedData(row) {
      const confirmdata = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)
      console.log(confirmdata)
      if (confirmdata !== 'confirm') {
        this.$message.info('你已经取消删除')
      } else {
        const { data } = await remove({
          id: row.id,
        })
        this.getInterviewinformation()
      }
    },
    //点击禁用按钮
    async DisableButton(row) {
      try {
        const { data } = await changeState({
          id: row.id,
          state: 0,
        })
        console.log(data)
      } catch (error) {
        this.$message.error('更改状态失败奥！', error)
      }
      this.disabled = true
      this.getInterviewinformation()
    },
    //点击启用按钮
    async EnableButton(row) {
      try {
        const { data } = await changeState({
          id: row.id,
          state: 1,
        })
        console.log(data)
      } catch (error) {
        this.$message.error('更改状态失败奥！', error)
      }
      this.getInterviewinformation()
    },
    // 获取视频链接
    videoUrl(row) {
      this.playerOptions.sources[1] = row.videoURL
      this.playVideo = true
    },
  },
}
</script>

<style scoped lang='less'>
.container {
  .box-card {
    // height: 850px;
    .keyword-btn {
      margin-right: 60px;
    }
    .newButton {
      position: absolute;
      right: 0px;
    }
  }
  /deep/.table-data {
    margin-top: 20px;
    .cell {
      .handle {
        color: #409eff;
        .Disablebutton {
          color: #999999;
        }
      }
    }
    .el-icon-film {
      color: blue;
    }
  }
  .page-nav {
    position: relative;
    width: 100%;
    padding: 25px;
    .el-pagination {
      position: absolute;
      right: 0;
    }
  }
}
</style>
